<template>
	<view class="calendar-area" :style="{background:calendarBg,borderRadius:calendarBorderRadius}">
		<!--    自定义日历头部   -->
		<view class="calendar-head flex space-between align-items">
			<!--  跳转上月的箭头  -->
			<view v-if="showArrow == true" class="flex align-items calendar-arrow" :style="{height: arrowHeight + 'px'}"
				@click="jumpToLastMonth">
				<view
					:style="{width: arrowSize +'px',height: arrowSize +'px',borderWidth: '1px 1px 0 0',borderColor:arrowColor}"
					:class="'arrow-style arrow-left-transform'"></view>
			</view>
			<!--  跳转上月的文字  -->
			<view v-else @click="jumpToLastMonth" class="pre-month" :style="{color: themeColor}">上月</view>
			<!--  日历头部显示当前展示月份  -->
			<view :style="{color: themeColor}">
				{{new Date(benchmark).getFullYear()}}/{{ new Date(benchmark).getMonth() + 1}}
			</view>
			<!--  跳转下月的箭头  -->
			<view v-if="showArrow == true" class="flex align-items calendar-arrow" :style="{height: arrowHeight + 'px'}"
				@click="jumpToNextMonth">
				<view
					:style="{width: arrowSize +'px',height: arrowSize +'px',borderWidth: '1px 1px 0 0',borderColor:arrowColor}"
					:class="'arrow-style arrow-right-transform'"></view>
			</view>
			<!--  跳转下月的文字  -->
			<view v-else @click="jumpToNextMonth" class="next-month" :style="{color: themeColor}">下月</view>
		</view>
		<!--    自定义日历 周一...周日 抬头   -->
		<view class="flex flex-wrap">
			<view v-for="(i,index) in weekText" :key="index" class="flex-class"
				:style="{width: 100/7 +'%',height:gridHeight+'px'}">
				<view :style="{color: themeColor}">{{ i }}</view>
			</view>
		</view>
		<!--    自定义日历日期格子 模式单选   -->
		<view class="flex flex-wrap" v-if="mode === 'date'" style="padding-bottom: 10px">
			<swiper :current="swiperCurrent" @change="swiperChange" class="swiper"
				:style="{width:'100%',height: gridHeight*6+'px'}" :circular="true" :indicator-dots="false"
				:autoplay="false" :duration="500">
				<swiper-item style="width: 100%">
					<view style="width: 100%" class="flex flex-wrap">
						<view v-for="(item,index) in month0" :key="index"
							:style="{ width: 100/7 +'%', height:gridHeight +'px' }" class="flex-class1">
							<!--    日期格子 模式单选 符合当月的格子  -->
							<view v-if="judgeShowType(0,item.date)" class="flex-class1 flex-wrap" style="width: 100%">
								<!--   judge(day) === true 选中单个日期 -->
								<view class="flex-class1 flex-wrap relative"
									:style="{ width:'100%', height:gridHeight+'px' }" v-if="judge(item.date)"
									@click="clickDay(item.date)">
									<view class="flex-class">
										<view class="flex-class"
											:style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}">
											{{ new Date(item.date).getDate()}}
										</view>
									</view>
									<view class="bottom-dots absolute" v-if="item.type==='dot'">
										<view style="width: 100%;padding-top: 2px" class="flex-class1">
											<view
												:style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}">
											</view>
										</view>
									</view>
									<view class="bottom-texts absolute" v-if="item.type==='text'"
										:style="{color: item.color}">{{ item.info }}</view>
								</view>
								<!--   judge(day) === false 没选中的日期 -->
								<view :style="{ width:'100%',height:gridHeight + 'px'}"
									class="flex-class1 flex-wrap day-normal-dark relative" v-else
									@click="clickDay(item.date)">
									<view class="flex-class">
										<view class="flex-class"
											:style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">
											{{ new Date(item.date).getDate()}}
										</view>
									</view>
									<view class="bottom-dots absolute" v-if="item.type==='dot'">
										<view style="width: 100%;padding-top: 2px" class="flex-class1">
											<view
												:style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}">
											</view>
										</view>
									</view>
									<view class="bottom-texts absolute" v-if="item.type==='text'"
										:style="{color: item.color}">{{ item.info }}</view>
								</view>
								<!--          -->
							</view>
							<!--    日期格子 模式单选 不符合当月的格子  -->
							<view v-else :style="{fontSize: fontSize +'px'}" class="flex-class" style="width: 100%">
								<view :style="{width:'100%',height:gridHeight+'px'}"
									class="flex-class1 day-normal fontColor-normal relative"
									@click="clickDayNotThisMonth(item.date)">
									<view class="flex-class">
										<view class="flex-class"
											:style="{width:dayWidth + 'px',height:dayWidth + 'px', fontSize: fontSize +'px'}">
											{{ new Date(item.date).getDate()}}
										</view>
									</view>
									<view class="bottom-dots absolute" v-if="item.type==='dot'">
										<view style="width: 100%;padding-top: 2px" class="flex-class1">
											<view
												:style="{width: '4px',height: '4px',borderRadius: '2px',background: '#bbb'}">
											</view>
										</view>
									</view>
									<view class="bottom-texts absolute" v-if="item.type==='text'"
										:style="{color: '#bbb'}">{{ item.info }}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view style="width: 100%" class="flex flex-wrap">
						<view v-for="(item,index) in month1" :key="index"
							:style="{ width: 100/7 +'%', height:gridHeight +'px' }" class="flex-class1">
							<!--    日期格子 模式单选 符合当月的格子  -->
							<view v-if="judgeShowType(1,item.date)" class="flex-class1 flex-wrap" style="width: 100%">
								<!--   judge(day) === true 选中单个日期 -->
								<view class="flex-class1 flex-wrap relative"
									:style="{ width:'100%', height:gridHeight+'px' }" v-if="judge(item.date)"
									@click="clickDay(item.date)">
									<view class="flex-class">
										<view class="flex-class"
											:style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}">
											{{ new Date(item.date).getDate()}}
										</view>
									</view>
									<view class="bottom-dots absolute" v-if="item.type==='dot'">
										<view style="width: 100%;padding-top: 2px" class="flex-class1">
											<view
												:style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}">
											</view>
										</view>
									</view>
									<view class="bottom-texts absolute" v-if="item.type==='text'"
										:style="{color: item.color}">{{ item.info }}</view>
								</view>
								<!--   judge(day) === false 没选中的日期 -->
								<view :style="{ width:'100%',height:gridHeight + 'px'}"
									class="flex-class1 flex-wrap day-normal-dark relative" v-else
									@click="clickDay(item.date)">
									<view class="flex-class">
										<view class="flex-class"
											:style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">
											{{ new Date(item.date).getDate()}}
										</view>
									</view>
									<view class="bottom-dots absolute" v-if="item.type==='dot'">
										<view style="width: 100%;padding-top: 2px" class="flex-class1">
											<view
												:style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}">
											</view>
										</view>
									</view>
									<view class="bottom-texts absolute" v-if="item.type==='text'"
										:style="{color: item.color}">{{ item.info }}</view>
								</view>
								<!--          -->
							</view>
							<!--    日期格子 模式单选 不符合当月的格子  -->
							<view v-else :style="{fontSize: fontSize +'px'}" class="flex-class" style="width: 100%">
								<view :style="{width:'100%',height:gridHeight+'px'}"
									class="flex-class1 day-normal fontColor-normal relative"
									@click="clickDayNotThisMonth(item.date)">
									<view class="flex-class">
										<view class="flex-class"
											:style="{width:dayWidth + 'px',height:dayWidth + 'px', fontSize: fontSize +'px'}">
											{{ new Date(item.date).getDate()}}
										</view>
									</view>
									<view class="bottom-dots absolute" v-if="item.type==='dot'">
										<view style="width: 100%;padding-top: 2px" class="flex-class1">
											<view
												:style="{width: '4px',height: '4px',borderRadius: '2px',background: '#bbb'}">
											</view>
										</view>
									</view>
									<view class="bottom-texts absolute" v-if="item.type==='text'"
										:style="{color: '#bbb'}">{{ item.info }}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view style="width: 100%" class="flex flex-wrap">
						<view v-for="(item,index) in month2" :key="index"
							:style="{ width: 100/7 +'%', height:gridHeight +'px' }" class="flex-class1">
							<!--    日期格子 模式单选 符合当月的格子  -->
							<view v-if="judgeShowType(2,item.date)" class="flex-class1 flex-wrap" style="width: 100%">
								<!--   judge(day) === true 选中单个日期 -->
								<view class="flex-class1 flex-wrap relative"
									:style="{ width:'100%', height:gridHeight+'px' }" v-if="judge(item.date)"
									@click="clickDay(item.date)">
									<view class="flex-class">
										<view class="flex-class"
											:style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}">
											{{ new Date(item.date).getDate()}}
										</view>
									</view>
									<view class="bottom-dots absolute" v-if="item.type==='dot'">
										<view style="width: 100%;padding-top: 2px" class="flex-class1">
											<view
												:style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}">
											</view>
										</view>
									</view>
									<view class="bottom-texts absolute" v-if="item.type==='text'"
										:style="{color: item.color}">{{ item.info }}</view>
								</view>
								<!--   judge(day) === false 没选中的日期 -->
								<view :style="{ width:'100%',height:gridHeight + 'px'}"
									class="flex-class1 flex-wrap day-normal-dark relative" v-else
									@click="clickDay(item.date)">
									<view class="flex-class">
										<view class="flex-class"
											:style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">
											{{ new Date(item.date).getDate()}}
										</view>
									</view>
									<view class="bottom-dots absolute" v-if="item.type==='dot'">
										<view style="width: 100%;padding-top: 2px" class="flex-class1">
											<view
												:style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}">
											</view>
										</view>
									</view>
									<view class="bottom-texts absolute" v-if="item.type==='text'"
										:style="{color: item.color}">{{ item.info }}</view>
								</view>
								<!--          -->
							</view>
							<!--    日期格子 模式单选 不符合当月的格子  -->
							<view v-else :style="{fontSize: fontSize +'px'}" class="flex-class" style="width: 100%">
								<view :style="{width:'100%',height:gridHeight+'px'}"
									class="flex-class1 day-normal fontColor-normal relative"
									@click="clickDayNotThisMonth(item.date)">
									<view class="flex-class">
										<view class="flex-class"
											:style="{width:dayWidth + 'px',height:dayWidth + 'px', fontSize: fontSize +'px'}">
											{{ new Date(item.date).getDate()}}
										</view>
									</view>
									<view class="bottom-dots absolute" v-if="item.type==='dot'">
										<view style="width: 100%;padding-top: 2px" class="flex-class1">
											<view
												:style="{width: '4px',height: '4px',borderRadius: '2px',background: '#bbb'}">
											</view>
										</view>
									</view>
									<view class="bottom-texts absolute" v-if="item.type==='text'"
										:style="{color: '#bbb'}">{{ item.info }}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!--    自定义日历日期格子 模式时间范围   -->
		<view class="flex flex-wrap" v-if="mode === 'dateRange'" style="padding-bottom: 10px">
			<swiper :current="swiperCurrent" @change="swiperChange" class="swiper"
				:style="{width:'100%',height: gridHeight*6+'px'}" :circular="true" :indicator-dots="false"
				:autoplay="false" :duration="500">
				<swiper-item style="width: 100%">
					<view style="width: 100%" class="flex flex-wrap">
						<view v-for="(item,index) in month0" :key="index"
							:style="{width: 100/7 +'%',height:gridHeight +'px'}" class="flex-class1">
							<!--    本月的展示日期 -->
							<view :class="'flex-class1 flex-wrap '" v-if="judgeShowType(0,item.date) "
								style="width: 100%">
								<!--   judge(day) === 1 选中日期范围开头 已选结尾-->
								<view class="flex-class flex-wrap relative" :style="{width: '100%',height: gridHeight+'px',
                         background:dayBg, color:dayColor,fontSize: fontSize +'px'}" v-if="judge(item.date) === 1"
									@click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
									<!-- <view class="start-text absolute">start</view> -->
								</view>
								<!--   judge(day) === 3 选中日期范围中间区域-->
								<view class="flex-class" :style="{width: '100%',height: gridHeight+'px',borderRadius:'0 0 0 0',
                         background:'#6161f921', color:dayBg,fontSize: fontSize +'px'}"
									v-else-if="judge(item.date) === 3" @click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
								</view>
								<!--   judge(day) === 2 选中日期范围结尾-->
								<view class="flex-class flex-wrap relative" :style="{width: '100%',height: gridHeight+'px',
                         background:dayBg, color:dayColor,fontSize: fontSize +'px'}" v-else-if="judge(item.date) === 2"
									@click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
									<view class="start-text absolute">end</view>
								</view>
								<!--   judge(day) === 5 选中日期范围开头 未选结尾-->
								<view class="flex-class flex-wrap relative"
									:style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
									v-else-if="judge(item.date) === 5" @click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
									<view class="start-text absolute">start</view>

								</view>
								<view class="flex-class flex-wrap relative"
									:style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
									v-else-if="judge(item.date) === 6" @click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
									<view class="start-text absolute">start/end</view>

								</view>
								<view :style="{ width:'100%',height:gridHeight+'px',fontSize: fontSize +'px' }"
									class="flex-class day-normal-dark" v-else @click="clickDay(item.date)">
									{{ new Date(item.date).getDate()}}
								</view>
							</view>
							<!--    它月的展示日期 -->
							<view v-else :style="{fontSize: fontSize +'px'}"
								:class="judge(item.date) === 3?'flex-class':'flex-class '" style="width: 100%">
								<view
									:style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
									:class="judge(item.date) === 3? 'flex-class day-normal fontColor-normal':'flex-class day-normal fontColor-normal'"
									@click="clickDayNotThisMonth(item.date)">
									{{ new Date(item.date).getDate()}}
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item style="width: 100%">
					<view style="width: 100%" class="flex flex-wrap">
						<view v-for="(item,index) in month1" :key="index"
							:style="{width: 100/7 +'%',height:gridHeight +'px'}" class="flex-class1">
							<!--    本月的展示日期 -->
							<view :class="'flex-class1 flex-wrap '" v-if="judgeShowType(1,item.date)"
								style="width: 100%">
								<!--   judge(day) === 1 选中日期范围开头 已选结尾-->
								<view class="flex-class flex-wrap relative" :style="{width: '100%',height: gridHeight+'px',
                         background:dayBg, color:dayColor,fontSize: fontSize +'px'}" v-if="judge(item.date) === 1"
									@click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
									<view class="start-text absolute">start</view>
								</view>
								<!--   judge(day) === 3 选中日期范围中间区域-->
								<view class="flex-class" :style="{width: '100%',height: gridHeight+'px',borderRadius:'0 0 0 0',
                         background:'#6161f921', color:dayBg,fontSize: fontSize +'px'}"
									v-else-if="judge(item.date) === 3" @click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
								</view>
								<!--   judge(day) === 2 选中日期范围结尾-->
								<view class="flex-class flex-wrap relative" :style="{width: '100%',height: gridHeight+'px',
                         background:dayBg, color:dayColor,fontSize: fontSize +'px'}" v-else-if="judge(item.date) === 2"
									@click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
									<view class="start-text absolute">end</view>
								</view>
								<!--   judge(day) === 5 选中日期范围开头 未选结尾-->
								<view class="flex-class flex-wrap relative"
									:style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
									v-else-if="judge(item.date) === 5" @click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
									<view class="start-text absolute">start</view>

								</view>
								<view class="flex-class flex-wrap relative"
									:style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
									v-else-if="judge(item.date) === 6" @click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
									<view class="start-text absolute">start/end</view>

								</view>
								<view :style="{ width:'100%',height:gridHeight+'px',fontSize: fontSize +'px' }"
									class="flex-class day-normal-dark" v-else @click="clickDay(item.date)">
									{{ new Date(item.date).getDate()}}
								</view>
							</view>
							<!--    它月的展示日期 -->
							<view v-else :style="{fontSize: fontSize +'px'}"
								:class="judge(item.date) === 3?'flex-class':'flex-class '" style="width: 100%">
								<view
									:style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
									:class="judge(item.date) === 3? 'flex-class day-normal fontColor-normal':'flex-class day-normal fontColor-normal'"
									@click="clickDayNotThisMonth(item.date)">
									{{ new Date(item.date).getDate()}}
								</view>
							</view>
							<!--        <view v-else :style="{fontSize: fontSize +'px'}" :class="'flex-class '" style="width: 100%">
                        <view :style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
                              :class="judge(item.date) === 3? 'flex-class day-normal fontColor bg':'flex-class day-normal fontColor-normal'"
                              @click="clickDayNotThisMonth(item.date)"
                        >
                                      {{ new Date(day).getDate()}}
                        </view>
                      </view>-->
						</view>
					</view>
				</swiper-item>
				<swiper-item style="width: 100%">
					<view style="width: 100%" class="flex flex-wrap">
						<view v-for="(item,index) in month2" :key="index"
							:style="{width: 100/7 +'%',height:gridHeight +'px'}" class="flex-class1">
							<!--    本月的展示日期 -->
							<view :class="'flex-class1 flex-wrap '" v-if="judgeShowType(2,item.date)"
								style="width: 100%">
								<!--   judge(day) === 1 选中日期范围开头 已选结尾-->
								<view class="flex-class flex-wrap relative" :style="{width: '100%',height: gridHeight+'px',
                         background:dayBg, color:dayColor,fontSize: fontSize +'px'}" v-if="judge(item.date) === 1"
									@click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
									<view class="start-text absolute">start</view>
								</view>
								<!--   judge(day) === 3 选中日期范围中间区域-->
								<view class="flex-class" :style="{width: '100%',height: gridHeight+'px',borderRadius:'0 0 0 0',
                         background:'#6161f921', color:dayBg,fontSize: fontSize +'px'}"
									v-else-if="judge(item.date) === 3" @click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
								</view>
								<!--   judge(day) === 2 选中日期范围结尾-->
								<view class="flex-class flex-wrap relative" :style="{width: '100%',height: gridHeight+'px',
                         background:dayBg, color:dayColor,fontSize: fontSize +'px'}" v-else-if="judge(item.date) === 2"
									@click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
									<view class="start-text absolute">end</view>
								</view>
								<!--   judge(day) === 5 选中日期范围开头 未选结尾-->
								<view class="flex-class flex-wrap relative"
									:style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
									v-else-if="judge(item.date) === 5" @click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
									<!-- <view class="start-text absolute">start</view> -->

								</view>
								<view class="flex-class flex-wrap relative"
									:style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
									v-else-if="judge(item.date) === 6" @click="clickDay(item.date)">
									<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
									<view class="start-text absolute">start/end</view>

								</view>
								<view :style="{ width:'100%',height:gridHeight+'px',fontSize: fontSize +'px' }"
									class="flex-class day-normal-dark" v-else @click="clickDay(item.date)">
									{{ new Date(item.date).getDate()}}
								</view>
							</view>
							<!--    它月的展示日期 -->
							<view v-else :style="{fontSize: fontSize +'px'}"
								:class="judge(item.date) === 3?'flex-class':'flex-class '" style="width: 100%">
								<view
									:style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
									:class="judge(item.date) === 3? 'flex-class day-normal fontColor-normal':'flex-class day-normal fontColor-normal'"
									@click="clickDayNotThisMonth(item.date)">
									{{ new Date(item.date).getDate()}}
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>

</template>

<script>
	export default {
		name: "customCalendar",
		props: {
			date: { // 父组件传值 选中的单个日期
				type: Number,
				default: null
			},
			dateRange: { // 父组件传值 选中的日期范围数组
				type: Array,
				default: function() {
					return [];
				}
			},
			calendarBg: { // 日历组件整体背景色，默认白色
				type: String,
				default: '#fff'
			},
			calendarBorderRadius: {
				type: String,
				default: '20rpx'
			},
			showArrow: { // 是否展示上下月的跳转箭头,false时展示文字
				type: Boolean,
				default: true
			},
			arrowSize: { // 上下月跳转箭头的尺寸大小
				type: Number,
				default: 8
			},
			arrowColor: { // 上下月跳转箭头的颜色
				type: String,
				default: '#242a32'
			},
			arrowHeight: {
				type: Number,
				default: 25
			},
			gridHeight: { // 日期格子高度
				type: Number,
				default: 42
			},
			themeColor: {
				type: String,
				default: 'rgb(100,124,203)'
			},
			dayWidth: { // 选中日期的圆圈宽高
				type: Number,
				default: 30
			},
			dayBg: { // 选中日期的圆背景色
				type: String,
				default: '#1976d2'
			},
			dayColor: { // 选中日期的圆文字颜色
				type: String,
				default: '#fff'
			},
			fontSize: { // 日期格子文字的大小
				type: Number,
				default: 13.5
			},
			mode: {
				type: String,
				default: 'date'
			},
			selected: {
				type: Array,
				default: function() {
					return [];
				}
			}

		},
		data() {
			return {
				benchmark: new Date().getTime(), // 基准点 时间戳
				sonDate: new Date().getTime(), // 选中单个日期
				sonDateRange: [], // 选中日期范围
				dotsList: [], // 打点数组
				month: [], // 以基准点调整的月份日历展示数组（增加打点）
				month0: [], // 以基准点调整的月份日历展示数组（增加打点）
				month1: [], // 以基准点调整的月份日历展示数组（增加打点）
				month2: [], // 以基准点调整的月份日历展示数组（增加打点）
				// weekText: ['一','二','三','四','五','六','日'], // 周抬头
				// weekText: ['一','二','三','四','五','六','日'], // 周抬头
				weekText: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 周抬头
				swiperCurrent: 1,
			}
		},
		watch: {
			date: { // 父组件绑定的单个日历值传给sonDate
				handler(val) {
					// console.log('父组件绑定的单个日历值传给sonDate',val)
					if (this.mode === 'date') {
						if (val !== 0 && val !== '') {
							this.sonDate = new Date(val).getTime()
							this.benchmark = new Date(val).getTime() // 校准基准点
							// console.log('选中日期与显示保持一致：',this.formatDateTime(this.sonDate,2))
						} else {
							this.sonDate = new Date().getTime()
							this.benchmark = new Date().getTime() // 校准基准点
							// console.log('选中日期初始化：',this.formatDateTime(this.sonDate,2))
						}
						this.dotsList = this.selected
						this.adjustCalendarDate() // 根据该日期计算当月
					}
				},
				deep: true,
				immediate: true
			},
			dateRange: {
				handler(val) {
					if (this.mode === 'dateRange') {
						// console.log('父组件绑定的日期数值传给sonDateRange',this.dateRange)
						if (val !== undefined) {
							this.sonDateRange = val
							this.benchmark = val[0] // 校准基准点
						}
						this.adjustCalendarDate() // 根据该日期计算当月
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			judgeShowType(current, date) {
				// getMonth 0-11
				if (parseInt(current) === parseInt(this.swiperCurrent)) {
					return new Date(this.benchmark).getMonth() === new Date(date).getMonth()
				}
				if (parseInt(this.swiperCurrent) - parseInt(current) === 1 || parseInt(this.swiperCurrent) - parseInt(
						current) === -2) {
					if (new Date(this.benchmark).getMonth() === 0) {
						return new Date(date).getMonth() === 11
					} else {
						return new Date(this.benchmark).getMonth() - 1 === new Date(date).getMonth()
					}
				}
				if (parseInt(current) - parseInt(this.swiperCurrent) === 1 || parseInt(this.swiperCurrent) - parseInt(
						current) === 2) {
					if (new Date(this.benchmark).getMonth() === 11) {
						return new Date(date).getMonth() === 0
					} else {
						return new Date(this.benchmark).getMonth() + 1 === new Date(date).getMonth()
					}
				}
			},
			/**
			 * swiper 改变时会触发
			 */
			swiperChange(e) {
				if (parseInt(this.swiperCurrent) - parseInt(e.detail.current) === 1 || parseInt(this.swiperCurrent) -
					parseInt(e.detail.current) === -2) {
					this.benchmark = new Date(this.getPreMonthBeginAndEnd(this.formatDateTime(this.benchmark, 2), 1))
						.getTime()
				}
				if (parseInt(e.detail.current) - parseInt(this.swiperCurrent) === 1 || parseInt(this.swiperCurrent) -
					parseInt(e.detail.current) === 2) {
					this.benchmark = new Date(this.getMonthBeginAndEnd(this.benchmark, 3)).getTime()
				}
				this.swiperCurrent = e.detail.current
				this.adjustCalendarDate()
			},
			/**
			 * 获取0点 23:59:59时间戳
			 */
			getDayZero(timeStamp, type) {
				let temp = parseInt(timeStamp)
				let day = new Date(new Date(temp).toLocaleDateString()).getTime()
				if (type === 1) {
					return this.formatDateTime(day, 1)
				}
				if (type === 2) {
					return this.formatDateTime(day + 86400000 - 1, 1)
				}
				/*if(type == 1){
				  console.log(this.formatDateTime(new Date(new Date(day).setHours(0, 0, 0, 0)).getTime(),2) )
				  return this.formatDateTime(new Date(new Date(day).setHours(0, 0, 0, 0)).getTime(),2)  // 设置指定时间的时分秒字段
				}
				if(type == 2){
				  return this.formatDateTime(new Date(new Date(day).setHours(23, 59, 59, 59)).getTime(),2) // 设置指定时间的时分秒字段
				}*/
			},
			/**
			 * 判断日期是否为选中的日期
			 */
			judge(day) {
				if (this.mode === 'date') { // 模式为单选日期
					if (new Date(this.getDayZero(new Date(this.formatDateTime(this.sonDate, 2)).getTime(), 1))
						.getTime() === new Date(this.getDayZero(new Date(day).getTime(), 1)).getTime()) {
						return true
					} else {
						return false
					}
				}
				if (this.mode === 'dateRange') { // 模式为单选日期
					if (JSON.stringify(this.sonDateRange) !== '{}') {
						if (this.sonDateRange.length === 1) {
							if (new Date(day).getTime() === this.sonDateRange[0]) {
								return 5
							}
						}
						if (this.sonDateRange.length === 2) {
							if (new Date(day).getTime() === this.sonDateRange[0] && this.sonDateRange[0] === this
								.sonDateRange[1]) {
								return 6
							} else {
								if (new Date(day).getTime() === this.sonDateRange[0]) {
									return 1
								} else if (new Date(day).getTime() === this.sonDateRange[1]) {
									return 2
								} else if (new Date(day).getTime() > this.sonDateRange[0] && new Date(day).getTime() < this
									.sonDateRange[1]) {
									return 3
								} else {
									return 4
								}
							}
						}
					} else {
						return 4
					}

				}
			},
			/**
			 * 点击了单个日期
			 */
			clickDay(day) {
				console.log('触发点击')
				if (this.mode === 'date') {
					console.log(day)
					this.sonDate = new Date(day).getTime()
					this.$emit("dateChange", this.sonDate)
					this.adjustCalendarDate()
				}
				if (this.mode === 'dateRange') {
					console.log(this.sonDateRange, 'sonDate');
					if (JSON.stringify(this.sonDateRange) === '{}') {
						this.sonDateRange = [new Date(day).getTime()]
					} else {

						if (this.sonDateRange.length === 1) {
							let t = this.sonDateRange[0]
							if (this.sonDateRange[0] > new Date(day).getTime()) { // 判断日期选择顺序
								this.sonDateRange[0] = new Date(day).getTime()
								this.sonDateRange.push(t)
							} else {
								this.sonDateRange.push(new Date(day).getTime())
							}
							let t1 = this.getDayZero(this.sonDateRange[0], 1)
							let t2 = this.getDayZero(this.sonDateRange[1], 2)
							this.$emit('confirm', [t1, t2])
						} else if (this.sonDateRange.length === 2) {
							this.sonDateRange = [new Date(day).getTime()]
						}
					}

				}
			},
			/**
			 * 点击了非本月的单个日期
			 */
			clickDayNotThisMonth(day) {
				if (this.mode === 'date') { // 模式为单选日期
					this.sonDate = new Date(day).getTime()
					let m = new Date(day).getMonth() //点击日期的月份和基准月做对比，看是它的上月还是下月
					let mark = new Date(this.benchmark).getMonth()
					let next = true // 默认点了下月
					if (mark > 0 && mark < 11) {
						if (m === mark + 1) {
							next = true
						}
						if (m === mark - 1) {
							next = false
						}
					} else {
						if (mark === 0) {
							if (m === 11) {
								next = false
							}
							if (m === 1) {
								next = true
							}
						}
						if (mark === 11) {
							if (m === 10) {
								next = false
							}
							if (m === 0) {
								next = true
							}
						}
					}
					if (next === true) {
						this.jumpToNextMonth()
					} else {
						this.jumpToLastMonth()
					}
					this.$emit("dateChange", this.sonDate)
				}
				if (this.mode === 'dateRange') {

				}
			},
			/**
			 * 校准日历
			 */
			adjustCalendar() {
				console.log('以this.benchmark为中心点 校准展示月份')
				let monthStart = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark, 2), 1)
				let monthEnd = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark, 2), 2)
				let lastMonday = monthStart
				let nextSunday = monthEnd
				if (new Date(monthStart).getDay() !== 1) { // 如果月初不是周一，补全
					lastMonday = this.getOneDay(new Date(monthStart).getTime(), 1) //补全周一
				}
				if (new Date(monthEnd).getDay() !== 0) { // 如果月底不是周日，补全
					nextSunday = this.getOneDay(new Date(monthEnd).getTime(), 7) // 补全周日
				}
				let month = this.getRangeOfDates(lastMonday, nextSunday)
				// console.log(monthStart,'monthStart',monthEnd,'monthEnd')
				// console.log(lastMonday,'lastMonday',nextSunday,'nextSunday')
				// console.log(month,'month')
				let list = []
				for (let i in month) { //  增加打点信息
					let obj = {
						date: month[i]
					}
					for (let j in this.dotsList) {
						// console.log(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1))
						// console.log(this.getDayZero(new Date(month[i]).getTime(),1))
						if (this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-', '/')).getTime(), 1) === this
							.getDayZero(new Date(month[i]).getTime(), 1)) {
							obj = Object.assign({}, obj, this.dotsList[j])
						}
					}
					list.push(obj)
				}
				this.month = list
				// console.log(this.month)
			},
			/**
			 * mode='date' 校准展示日历
			 */
			adjustCalendarDate() {
				// console.log('以this.benchmark为中心点 校准展示月份')
				let monthStart = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark, 2), 1)
				let monthEnd = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark, 2), 2)
				let lastMonday = monthStart
				let nextSunday = monthEnd
				if (new Date(monthStart).getDay() !== 1) { // 如果月初不是周一，补全
					lastMonday = this.getOneDay(new Date(monthStart).getTime(), 1) //补全周一
				}
				if (new Date(monthEnd).getDay() !== 0) { // 如果月底不是周日，补全
					nextSunday = this.getOneDay(new Date(monthEnd).getTime(), 7) // 补全周日
				}
				let monthStart1 = this.getPreMonthBeginAndEnd(monthStart, 1)
				let monthEnd1 = this.getPreMonthBeginAndEnd(monthStart, 2)
				let lastMonday1 = monthStart1
				let nextSunday1 = monthEnd1
				if (new Date(monthStart1).getDay() !== 1) { // 如果月初不是周一，补全
					lastMonday1 = this.getOneDay(new Date(monthStart1).getTime(), 1) //补全周一
				}
				if (new Date(monthEnd1).getDay() !== 0) { // 如果月底不是周日，补全
					nextSunday1 = this.getOneDay(new Date(monthEnd1).getTime(), 7) // 补全周日
				}
				let y = new Date(monthStart).getFullYear()
				let m1 = new Date(monthStart).getMonth() + 1 // 来月
				let two = new Date(y, m1, 1).getTime()
				let monthStart2 = this.getMonthBeginAndEnd(two, 1)
				let monthEnd2 = this.getMonthBeginAndEnd(two, 2)
				let lastMonday2 = monthStart2
				let nextSunday2 = monthEnd2
				if (new Date(monthStart2).getDay() !== 1) { // 如果月初不是周一，补全
					lastMonday2 = this.getOneDay(new Date(monthStart2).getTime(), 1) //补全周一
				}
				if (new Date(monthEnd2).getDay() !== 0) { // 如果月底不是周日，补全
					nextSunday2 = this.getOneDay(new Date(monthEnd2).getTime(), 7) // 补全周日
				}
				let month = this.getRangeOfDates(lastMonday, nextSunday)
				let month1 = this.getRangeOfDates(lastMonday1, nextSunday1)
				let month2 = this.getRangeOfDates(lastMonday2, nextSunday2)
				let list = [] // 当月
				let list1 = [] // 上月
				let list2 = [] // 下月
				for (let i in month) { //  增加打点信息
					let obj = {
						date: month[i]
					}
					for (let j in this.dotsList) {
						if (this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-', '/')).getTime(), 1) === this
							.getDayZero(new Date(month[i]).getTime(), 1)) {
							obj = Object.assign({}, obj, this.dotsList[j])
						}
					}
					list.push(obj)
				}
				for (let i in month1) { //  增加打点信息
					let obj = {
						date: month1[i]
					}
					for (let j in this.dotsList) {
						if (this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-', '/')).getTime(), 1) === this
							.getDayZero(new Date(month1[i]).getTime(), 1)) {
							obj = Object.assign({}, obj, this.dotsList[j])
						}
					}
					list1.push(obj)
				}
				for (let i in month2) { //  增加打点信息
					let obj = {
						date: month2[i]
					}
					for (let j in this.dotsList) {
						if (this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-', '/')).getTime(), 1) === this
							.getDayZero(new Date(month2[i]).getTime(), 1)) {
							obj = Object.assign({}, obj, this.dotsList[j])
						}
					}
					list2.push(obj)
				}
				if (this.swiperCurrent === 0) {
					this.month1 = list2
					this.month2 = list1
					this.month0 = list
				} else if (this.swiperCurrent === 1) {
					this.month1 = list
					this.month0 = list1
					this.month2 = list2
				} else {
					this.month2 = list
					this.month0 = list2
					this.month1 = list1
				}
			},
			/**
			 * 当月的月初与月底
			 */
			getMonthBeginAndEnd(d, type) {
				let y = new Date(d).getFullYear()
				let m = new Date(d).getMonth()
				let m1 = new Date(d).getMonth() + 1 // 来月
				let one = new Date(y, m, 1).getTime()
				let two = new Date(y, m1, 1).getTime()
				if (type === 1) {
					return this.formatDateTime(new Date(one).getTime(), 1)
				}
				if (type === 2) {
					return this.formatDateTime(new Date(two).getTime() - 1, 1)
				}
				if (type === 3) {
					return this.formatDateTime(new Date(two).getTime(), 1)
				}
			},
			/**
			 * 指定某日的上月月初和月底
			 */
			getPreMonthBeginAndEnd(d, type) {
				let y = new Date(d).getFullYear()
				let m = new Date(d).getMonth()
				let m1 = new Date(d).getMonth() - 1
				let one = new Date(y, m1, 1).getTime()
				let two = new Date(y, m, 1).getTime()
				if (type === 1) {
					return this.formatDateTime(new Date(one).getTime(), 1)
				}
				if (type === 2) {
					return this.formatDateTime(new Date(two).getTime() - 1, 1)
				}
			},
			/**
			 * 时间戳格式化
			 */
			formatDateTime(timeStamp, type) {
				timeStamp = parseInt(timeStamp)
				if (timeStamp == null) {
					return ''
				} else {
					const date = new Date(timeStamp)
					const y = date.getFullYear() // 年
					let MM = date.getMonth() + 1 // 月
					MM = MM < 10 ? ('0' + MM) : MM
					let d = date.getDate() // 日
					d = d < 10 ? ('0' + d) : d
					let h = date.getHours() // 时
					h = h < 10 ? ('0' + h) : h
					let m = date.getMinutes() // 分
					m = m < 10 ? ('0' + m) : m
					let s = date.getSeconds() // 秒
					s = s < 10 ? ('0' + s) : s
					if (type === 1) {
						return y + '/' + MM + '/' + d + ' ' + h + ':' + m + ':' + s
					} else if (type === 2) {
						return y + '/' + MM + '/' + d
					} else if (type === 3) {
						return y + '/' + MM + '/' + d + ' ' + h + ':' + m + ':' + s
					} else if (type === 4) {
						return y + '/' + MM + '/' + d
					} else {
						return h + ':' + m + ':' + s
					}
				}
			},
			/**
			 *  获取时间段内的所有日期/指定星期几的日期 (不传 week 就是所有日期)
			 *  tupe:1 计算两个日期相差的天数
			 */
			getRangeOfDates(startTime, endTime, week, type) {
				// 获取时间段内的所有日期/指定星期几的日期
				week = week == 7 ? 0 : week;
				let dateList = [];
				startTime = new Date(startTime);
				endTime = new Date(endTime);
				while ((endTime.getTime() - startTime.getTime()) >= 0) {
					let year = startTime.getFullYear();
					let month = startTime.getMonth() + 1 < 10 ? '0' + (startTime.getMonth() + 1) : startTime.getMonth() +
						1;
					let day = startTime.getDate().toString().length == 1 ? '0' + startTime.getDate() : startTime.getDate();
					if (isNaN(week) || startTime.getDay() == week) {
						dateList.push(`${year}/${month}/${day}`);
					}
					startTime.setDate(startTime.getDate() + 1);
				}
				if (type === 1) {
					return dateList.length;
				} else {
					return dateList
				}
			},
			/**
			 * 获取指定日期所在周的周几 周n
			 */
			getOneDay(timeStamp, n) {
				let now = new Date(timeStamp);
				let nowTime = now.getTime();
				let day = now.getDay();
				if (now.getDay() === 0) {
					day = 7;
				}
				let oneDayTime = 24 * 60 * 60 * 1000;
				let dayTime = nowTime
				if (n < day) {
					dayTime = nowTime - (day - n) * oneDayTime
				}
				if (n > day) {
					dayTime = nowTime + (n - day) * oneDayTime
				}
				return this.formatDateTime(new Date(dayTime).getTime(), 1)
			},
			/**
			 * 跳转上月
			 */
			jumpToLastMonth() {
				this.benchmark = new Date(this.getPreMonthBeginAndEnd(this.formatDateTime(this.benchmark, 2), 1))
					.getTime() // 基准点改为 上个月的月初 时间戳
				if (this.swiperCurrent !== 0) {
					this.swiperCurrent -= 1
				} else {
					this.swiperCurrent = 2
				}
				this.adjustCalendarDate()
			},
			/**
			 * 跳转下月
			 */
			jumpToNextMonth() {
				this.benchmark = new Date(this.getMonthBeginAndEnd(this.benchmark, 3)).getTime() // 基准点改为 下个月的月初 时间戳
				if (this.swiperCurrent !== 2) {
					this.swiperCurrent += 1
				} else {
					this.swiperCurrent = 0
				}
				this.adjustCalendarDate()
			}
		}
	}
</script>

<style scoped lang="scss">
	.calendar-area {
		width: 28rem;
		max-width: calc(100vw - 60px);
	}

	.calendar-head {
		padding-top: 20rpx
	}

	// 日历头部
	.calendar-arrow {
		padding: 0 40rpx;
	}

	.pre-month {
		margin-left: 5px;
		padding: 0 10px;
	}

	// 上月跳转文字
	.next-month {
		margin-right: 5px;
		padding: 0 10px;
	}

	// 下月跳转文字
	.day-normal-dark {
		background: transparent;
		color: rgb(12, 12, 12);
	}

	.day-normal {
		background: transparent;
	}

	.start-text {
		width: 100%;
		font-size: 9px;
		text-align: center;
		bottom: 0;
	}

	.bottom-dots {
		width: 100%;
		font-size: 9px;
		text-align: center;
		bottom: 4rpx;
	}

	.bottom-texts {
		width: 100%;
		font-size: 9px;
		text-align: center;
		bottom: 0px;
	}

	.grid-text {
		width: 100%;
		text-align: center;
	}

	.arrow-style {
		background-color: transparent;
		/* 模块背景为透明 */
		border-style: solid;
	}

	.arrow-left-transform {
		transform: rotate(225deg);
	}

	/*箭头方向可以自由切换角度*/
	.arrow-right-transform {
		transform: rotate(45deg);
	}

	/*箭头方向可以自由切换角度*/

	.flex-class {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-class1 {
		display: flex;
		align-items: flex-start;
		justify-content: center;
	}

	.flex {
		display: flex;
	}

	.justify-content1 {
		justify-content: center;
	}

	.space-between {
		justify-content: space-between;
	}

	.align-items {
		align-items: center;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.flex-no-wrap {
		flex-wrap: nowrap;
	}

	.relative {
		position: relative;
	}

	.absolute {
		position: absolute;
	}

	.bg {
		background: #6161f921;
	}

	.fontColor-normal {
		color: rgb(187, 187, 187);
	}

	.fontColor {
		color: #6161f9;
	}
</style>